<!--文本扩展-->
<template>
  <div v-show="show" style="width: 100%;">
      <p  style="margin-block-start:0em;margin-block-end:0em;" 
        :style="{   'color':color,
                    'font-size':size+'px',
                    'text-align':align,
                    'font-weight':bold}"
        >
        <slot/>
        </p>
  </div>
  
</template>

<script>
export default {
    name:"fancy-text", 
    props:{
        text: { 
            type: String,
            default:''
        },
        show:{
            type:Boolean,
            default:true
        },
        align:{
            type:String,
            default:'left'
        },
        color:{
            type:String,
            default:''
        },
        size:{
            type:Number,
            default:14,
        },
        bold:{
            type:Number,
            default:400,
        }
    }
}
</script>
<style scoped>
.text-left{
    
    text-align:left
}
.text-center{
    text-align:center;
    justify-content: center;
}
.text-right{
    margin-left: auto;
    text-align:right;
    justify-content: flex-end;
}
</style>
